<template>
  <div class="robot-list-container">
    <!-- 导航栏 -->
    <van-nav-bar
      class="custom-navbar">
      <template #left>
        <van-icon name="arrow-left" class="nav-icon" @click="backRoute" />
      </template>
      <template #title>
        <span class="nav-title">我的机器人</span>
      </template>
<!--      <template #right>-->
<!--        <span @click="addRobot" class="complete-btn"  >添加</span>-->
<!--      </template>-->
    </van-nav-bar>
    <!-- 机器人列表 -->
    <div class="robot-list">
      <!-- 空状态 -->
      <div v-if="robots.length === 0" class="empty-robot">
        <van-icon name="robot-o" size="60" color="#dcdee0" />
        <div class="empty-text">您还没有添加任何机器人</div>
      </div>
      <!-- 机器人列表项 -->
      <div
        v-for="robot in robots"
        :key="robot.id"
        class="robot-item"
        @click="showRobotActions(robot)"
      >
        <div class="robot-avatar">
          <van-icon name="robot" size="28" v-if="!robot.avatar" />
          <img v-else :src="robot.avatar" alt="机器人头像">
        </div>
        <div class="robot-info">
          <div class="robot-name">{{ robot.name }}</div>
          <div class="robot-type">类型：<span class="type-tag">推送机器人</span></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { postAction,getFileAccessHttpUrl } from '@/api'
export default {
  name: "RobotList",
  data() {
    return {
      robots: [
      ]
    };
  },
  created() {
    this.initMyBot()
  },
  methods: {
    backRoute() {
      this.$router.push({name: 'myHome'})
    },
	initMyBot(){
		postAction('/sys/chat/bot/getBot', {
			userId: this.userId
		}).then((res) => {
		if (res.success) {
			this.processRobots(res.result)
		} else {
			console.error('加载机器人失败:', res.message);
		}
		}).catch((err) => {
			console.error('加载机器人异常:', err);
		});
	},
	processRobots(list) {
		list.forEach((o) => {
			o.avatar = o.avatar
				? getFileAccessHttpUrl(o.avatar)
				: '/app/static/mobile/img/common/robot_default.png';
		});
		this.robots = list;
	},
    addRobot() {
		// 跳转到添加机器人页面
		// 这里简单用提示代替
		this.$router.push('/coordination/myHome/chooseRobot')
    },
    showRobotActions(robot) {
      // 跳转到机器人详情页面
      this.$router.push({name: 'robotDetail',params:robot})
    }
    // showRobotActions(robot) {
		// // 显示对机器人的操作选项，例如：删除、编辑等
		// this.$dialog.confirm({
		// 	title: '操作选项',
		// 	message: `选择要对【${robot.name}】执行的操作`,
		// 	showCancelButton: true,
		// 	cancelButtonText: '取消',
		// 	confirmButtonText: '删除',
		// }).then(() => {
		// 	// 点击确认，跳转到管理页面
		// 	this.$toast(`管理机器人：${robot.name}`);
		// }).catch(() => {
		// 	// 取消操作
		// });
    // }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__content{
  background: #F4FCFF;
}
.robot-list-container {
  background: linear-gradient(180deg, #F4FCFE, #fff);
  /*background-color: #f4f8f9;*/
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.custom-navbar {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-title {
  font-size: 16px;
  font-weight: bold;
  color: #26B1A1;
  letter-spacing: 0.5px;
}

.complete-btn {
  font-size: 16px;
  color: #26B1A1;
  font-weight: 500;
}
.van-nav-bar .van-icon {
  color: #26B1A1;
  font-size: 16px;
}

.robot-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}

.empty-robot {
  text-align: center;
  padding: 60px 0;
  color: #999;
}
.empty-text {
  font-size: 16px;
  margin: 20px 0;
}
.robot-item {
  display: flex;
  align-items: center;
  padding: 16px 10px;
  border-bottom: 1px solid #f8f8f8;
  background-color: white;
  margin-bottom: 10px;
  margin-top: 10px;
  border-radius: 8px;
}
.robot-avatar {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: linear-gradient(90deg, #26B1A1 , #6FD0B3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  margin-right: 16px;
}
.robot-info {
  flex: 1;
}
.robot-name {
  font-size: 17px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}
.robot-type {
  font-size: 14px;
  color: #999;
}
.robot-actions .van-icon {
  font-size: 20px;
  color: #969799;
}
.robot-actions .van-icon:active {
  color: #1989fa;
}
.robot-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}
.type-tag {
  color: white;
  background: linear-gradient(90deg, #26B1A1 , #6FD0B3);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}
</style>
